<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">-->
    <link rel="stylesheet" href="/stylesheets/tumblr-login.css">
</head>
<body>
<form id="login_form" method="post">
<div class="login-form">
    <h1>登录</h1>
    <div class="form-group ">
        <input type="text" class="form-control" placeholder="账号" name="mobile" id="UserName" value="18862603161" required >
        <i class="fa fa-user"></i>
    </div>
    <div class="form-group log-status">
        <input type="password" class="form-control" placeholder="密码" name="usercode" id="Password" value="123456789" required>
        <i class="fa fa-lock"></i>
    </div>
    <span class="alert">Invalid Credentials</span>
    <label><a class="link" href="/register">注册新账号</a></label>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    <label><a class="link" href="#">忘记你的密码?</a></label>
    <button type="submit" class="log-btn" >登录</button>
</div>
</form>
<div class="img_icon">
    <img src="/images/dog_icon.png" alt="">
</div>
<script src="/js/jquery-1.8.3.js"></script>
<script>
    $(function () {
        $('#login_form').submit(function () {
            $.ajax({
                type:'post',
                url:'/login',
                data:$('#login_form').serialize(),
                dataType:'json',
                success:function (data) {
                    if(data.res==1){
//                        location.href=data.url;
                        location.href='/';
                    }else if(data.res==0){
                        alert('用户名或者密码错误');
                        location.href='/login';
                    }
                },
                error:function (error) {
                    alert(error.message)
                }
            });
            return false;
        });

    });
</script>
</body>
</html>